如何在 Vite 中使用 Element UI + Vue 3 |
您所在的位置:网站首页 › element ui vue › 如何在 Vite 中使用 Element UI + Vue 3 |
在上篇文章《2021新年 Vue3.0 + Element UI 尝鲜小记》里,我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目,而 Vue CLI 实际上为我们生成了一个我们熟悉的 Webpack 工程项目。 Webpack 无需过多介绍,一个十分强大的打包工具。但 Webpack 也有不足的地方,比如第一次打包需要很长时间,修改代码之后的热更新速度较慢。 随着 Vue 3 一起推出的还有一个强大的新一代打包工具 Vite, 一个面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具,恰恰就解决了上述 Webpack 的痛点。Vite 主要的优势有三点: 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译听上去就很不错,立刻上手尝试一下。 初始化 Vite 项目使用 npm init @vitejs/app my-vue-app --template vue命令快速生成一个使用 Vite 构建的 Vue 3 项目模版。 运行 npm run dev 即可把项目跑起来,进入开发模式。 项目冷启动速度非常快,不到 1 秒钟,浏览器里就已经出现项目预览了。项目冷启动只用了 382ms,真香。 开发项目,首先要挑选一个 UI 组件库。目前市面上支持 Vue 3 的组件库并不多,Element UI 不负众望已经完成支持了。Element Plus 是饿了么 Element UI 团队推出的适配了 Vue 3 的全新版本,新增了很多实用组件,体验非常好。 Vite 工程引入 Element Plus 的方法也很简单,首先安装 npm i element-plus然后修改项目入口文件,引入 Element Plus 库和相关样式文件 import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App).use(ElementPlus).mount('#app')重新启动项目,就可以愉快的使用 Element Plus 了。现在我们再来体验一下即时热更新功能,修改一下 App.vue 文件,新增一个 Button Element UI保存文件,几乎同一时间,浏览器项目预览就完成了更新,热更新时间几乎可以忽略不计。 Vite 使用了最新浏览器的特性,给我们带来了更好的开发体验。目前的相关生态如 Element UI 都已经完美支持,可以在新项目里尝试用起来了。 项目源代码可以参考:https://github.com/element-plus/element-plus-vite-starter |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |